import React, { useState,useEffect } from 'react';
import {
    Modal,
    Button, Form, Input, Select, Switch, DatePicker
} from 'antd';
import dayjs from "dayjs"
import {editorPurchase,getGoods} from '../../../../api/wj'
//表格数据类型
interface DataType {
    key?: React.Key; //序号
    id?:number//id
    title?: string; //抢购标题 name
    goods?:string;//商品
    goodsId?: string; //货号，goodsID
    state?: number //以未上架判断isPut
    start?: string;//开始时间 StartTime
    creat?: string; //添加时间 AddTime
}
interface PropsType {
    isModalOpen: boolean,
    closeModal(): void,//取消弹框事件
    edit2:DataType | undefined,
    getAll():void
}
function PurchaseAlter(props: PropsType) {
    const [form] = Form.useForm();
    
    const { RangePicker } = DatePicker;
    //编辑开始时间
    const [time,setTime] = useState('')
    const [goodsList ,setGoodsList]= useState<{id:number, name: string, sernum: string}[]>()
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const config = {
    rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
    };
    useEffect(()=>{
        get()
    },[])
    const get=()=>{
        getGoods().then(res=>{
            if(res.code=='200'){
                setGoodsList(res.data)
            }
        }).catch(err=>{
            console.log('有问题',err);
        })
    }
    /* eslint-disable no-template-curly-in-string */
    const validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    /* eslint-enable no-template-curly-in-string */
    
    const onFinish = (values: any) => {
        console.log(values); 
        let data = {title:values.title,goods:values.goodsId,start:time,id:props.edit2.id}
        editorPurchase(data).then(res=>{
            console.log('编辑成功',res);
            if(res.code=='200'){
                props.getAll()
                props.closeModal()
            }
        }).catch(err=>{
            console.log('编辑失败',err);
        })
        console.log(data);
        
    };
    //点击取消退出弹框
    const cancelBtn = () => {
        // console.log('点击了取消按钮');
        props.closeModal()
    }
    useEffect(()=>{
        form.setFieldsValue({
            title: props.edit2?.title,
            // goods: props.edit2?.goods,
            goodsId: props.edit2?.goodsId,
            // state : props.edit2?.state,
            start : dayjs(props.edit2?.start),
            // creat : dayjs( props.edit2?.creat),
        })
        
        console.log('子组件接收到的父组件参数',props.edit2);
    },[props])
    //开始时间change事件
    const change = (e:any,dateString: string)=>{
        console.log("dateString",dateString);
        setTime(dateString)
    }
    return (
        <div>
            {/* onOk={handleOk} onCancel={handleCancel} */}
            <Modal title="编辑" centered={true} open={props.isModalOpen} footer={null} onCancel={props.closeModal}>
                <Form
                    {...layout}
                    name="nest-messages"
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                    validateMessages={validateMessages}
                    form={form}
                >
                    <Form.Item name='title' label="抢购标题" rules={[{ required: true }]} initialValue={props.edit2?.title}>
                        <Input />
                    </Form.Item>
                    {/* <Form.Item name='goods' label="商品" initialValue={props.edit2?.goods}>
                        <Input></Input>
                    </Form.Item> */}
                    <Form.Item label="货号" name="goodsId" initialValue={props.edit2?.goodsId}>
                            <Select
                                placeholder="请选择状态"
                                // onChange={onGenderChange}
                                allowClear
                            >
                                {goodsList?.map(item => {
                                    return <Option key={item.id} value={item.sernum}>{item.sernum}</Option>
                                })}
                            </Select>
                    </Form.Item>
                    <Form.Item name="start" label="开始时间" {...config}>
                        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={change} />
                    </Form.Item>
                    {/* <Form.Item name="AddTime" label="添加时间" {...config} initialValue={props.edit2?.AddTime}>
                        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
                    </Form.Item> */}
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                        <Button type="primary" htmlType="submit" style={{marginRight:'20px'}}>
                            确认
                        </Button>
                        <Button htmlType="button" onClick={cancelBtn}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default PurchaseAlter